<template>
    <fieldset>
        <legend>高级侦听器</legend>
        <button @click="handlestop">点击停止侦听</button>
    </fieldset>
</template>
<script setup>
    import {ref,watchEffect} from "vue"

    let msg = ref('窗外')
    let msg2 = ref('春天的故事')
    setTimeout(()=>{
        msg.value='女儿红'
       
        // 停止侦听
    },2000)

    // setTimeout(()=>{
    //     msg2.value='涛声依旧'
    // },3000)


    // 不需要指定特定的侦听数据，只需要把侦听数据放到函数中中使用
    // 在数据变化的时候，侦听器会重新触发
    let stop = watchEffect(()=>{
        // console.log('高级侦听器------',msg.value);
        // console.log('高级侦听器------',msg2.value);
    })

    // 停止侦听，再次调用watchEffect的返回值
    // 正常情况下，组件卸载会自动停止侦听，但是可以通过调用watchEffect             
    let handlestop = ()=>{
        stop()
    }

    // 失效函数onInvalidata
    // 触发的情况：1.watchEffect即将重新回调  2.watchEffect停止侦听（组件卸载隐式停止侦听，显示主动停止侦听）
    // 顺序:1.打印 '春天的故事' => '侦听器即将重新执行' => '涛声依旧'
    watchEffect((onInvalidate)=>{
        // console.log('onInvalidate----------',msg2.value);
        onInvalidate(()=>{
            // console.log('侦听器即将重新执行');
        })
    })

    setTimeout(()=>{
        msg.value="水手"
    },2000)
</script>
